<script setup lang="ts">
import { useSettingsStore } from '@/stores/modules/settings'
import { storeToRefs } from 'pinia'
import Drawer from './components/Drawer/index.vue'
import LayoutHorizontal from './layout-horizontal/index.vue'
import LayoutVertical from './layout-vertical/index.vue'

const { systemLayout } = storeToRefs(useSettingsStore())

const LayoutMenu = {
  horizontalLayout: LayoutHorizontal,
  verticalLayout: LayoutVertical
}
</script>

<template>
  <div class="layout-box">
    <component :is="LayoutMenu[systemLayout]" />
    <Drawer />
  </div>
</template>

<style scoped lang="scss">
.layout-box {
  height: 100%;
  width: 100%;
}
</style>
